<template>
  <div class="perm">
    <!-- 搜索模块 -->
    <pageSearch :formConfig="formConfig" />
    <!-- 表格 -->
    <pageTable
      :contentConfig="contentConfig"
      pageName="perm"
      @addClick="handleAdd"
      @editClick="handleEdit"
    >
      <!-- 所属菜单 -->
      <template #menu="scope">
        <div>{{ scope.row.menu.name }}</div>
      </template>
    </pageTable>
    <!-- 弹窗 -->
    <pageModal
      ref="pageModalRef"
      :defaultInfo="defaultInfo"
      :modalConfig="modalConfig"
      pageName="perm"
    ></pageModal>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"

// 配置文件
import { formConfig } from "./config/search.config"
import { contentConfig } from "./config/content.config"
import { modalConfig } from "./config/modal.config"

// 搜索组件
import pageSearch from "@/components/page-search"
// table组件
import pageTable from "@/components/page-table"
// 弹窗组件
import pageModal from "@/components/page-modal"
import { usePageModal } from "@/hooks/use-page-modal"
import { mainStore } from "@/stores/modules/main"

export default defineComponent({
  components: {
    pageSearch,
    pageTable,
    pageModal
  },
  setup() {
    const [pageModalRef, defaultInfo, handleAdd, handleEdit] = usePageModal()

    const mainstore = mainStore()
    // 动态添加所属菜单
    const menuItem = modalConfig.formItems.find(
      item => item.field === "menu_id"
    )
    menuItem!.options = mainstore.permMenuOptions?.map(item => {
      return { title: item.name, value: item.id }
    })
    return {
      handleAdd,
      handleEdit,
      formConfig,
      contentConfig,
      modalConfig,
      pageModalRef,
      defaultInfo
    }
  }
})
</script>

<style scoped lang="less"></style>
